<template>
  <div class="index-page">
    <img @load="load()" src="@/assets/images/index-title.png" alt="" class="title"/>
    <img @load="load()" @click="$router.push({name: 'upload'})" src="@/assets/images/index-btn.png" class="start-btn"/>

    <!--用来预加载图片-->
    <img class="hidden-img" v-if="loadedCnt === 2" src="@/assets/images/upload-bg.png"/>
    <img class="hidden-img" v-if="loadedCnt === 2" src="@/assets/images/upload-add.png"/>
    <img class="hidden-img" v-if="loadedCnt === 2" src="@/assets/images/upload-btn.png"/>
    <img class="hidden-img" v-if="loadedCnt === 2" src="@/assets/images/upload-male.png"/>
    <img class="hidden-img" v-if="loadedCnt === 2" src="@/assets/images/upload-female.png"/>
    <img class="hidden-img" v-if="loadedCnt === 2" src="@/assets/images/upload-checkmark.png"/>
  </div>
</template>

<script>
export default {
  name: 'indexPage',
  data: () => ({
    loadedCnt: 0
  }),
  created () {
    window._hmt.push(['_trackEvent', '海报页', 'view', '进入海报页'])
  },
  methods: {
    load () {
      this.loadedCnt++
    }
  }
}
</script>

<style lang="scss">
  .index-page {
    position: relative;
    background: {
      image: url(~@/assets/images/index-bg.jpg);
      size: cover;
      position: 40% 50%;
    };
    .title {
      position: absolute;
      top: 64px;
      left: 31px;
      width: 713px;
      height: 325px;
    }
    .start-btn {
      position: absolute;
      left: 170px;
      bottom: 109px;
      width: 446px;
      height: 115px;
    }
  }
</style>
